import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

import { registerMicroApps, start, initGlobalState } from "qiankun";

const app = createApp(App);
app.use(router);
app.mount("#main-app");

// 初始化 state
let initState = { count: 0 };
const actions = initGlobalState(initState);
// 在主应用中监听贡献数据的变化
actions.onGlobalStateChange((state) => {
  initState = state;
}, true);

const getGlobalState = () => initState;

// 注册子应用
registerMicroApps([
  {
    // 子应用的名称，必须唯一。
    name: "react-app",
    // 子应用项目本地运行地址
    entry: "//localhost:8100",
    // 子应用的容器（子应用嵌入到主项目id为container的地方）
    container: "#container",
    activeRule: "/react",
    //子应用激活时的路由规则（子应用路由）
    props: { getGlobalState },
  },
  {
    name: "vue-app",
    entry: "//localhost:8200",
    container: "#container",
    activeRule: "/vue",
    props: { getGlobalState },
  },
]);

start({ sandbox: { experimentalStyleIsolation: true } });
